{% extends "common/base.html" %}
{% block head %}
    <style>
        .lg-td {
            width: 200px;
            text-align: right;
        }

        .sm-td {
            width: 90px;
            text-align: right;
        }
    </style>
    {{ super() }}
{% endblock %}
{% block title %}商品评论{% endblock %}
{% block body %}
    <div class="layui-card">
    <input type="hidden" id="goods_id" value="{{ goods_id }}"/>
    <div class="layui-card-header" style="text-align: center"><span style="font-size:20px;font-weight: bolder;" id="jsonH3"></span></div>
    <div class="layui-card-body">
        <div class="layui-row layui-col-space5">
            <div class="layui-col-md8">
                <div class="layui-row grid-demo">
                    <div class="layui-col-md12">
                        <table class="layui-table" style="margin-left: 10px">
                            <tbody class="layui-table-body">
                            <tr>
                                <td class="lg-td">商品编号：</td>
                                <td class="lg-td"><span id="jsonGoodsId"></span></td>
                                <td class="lg-td">商品销售量</td>
                                <td class="lg-td"><span id="jsonGoodsSales"></span></td>
                            </tr>
                            <tr>
                                <td>套餐最低价</td>
                                <td><span id="jsonMinGroupPrice"></span></td>
                                <td>套餐最高价</td>
                                <td><span id="jsonMaxGroupPrice"></span></td>
                            </tr>
                            <tr>
                                <td>商品最低价</td>
                                <td><span id="jsonMinNomalPrice"></span></td>
                                <td>商品最高价</td>
                                <td><span id="jsonMaxNomalPrice"></span></td>
                            </tr>
                            <tr>
                                <td>商品描述</td>
                                <td colspan="3"><span id="goodsDesc"></span></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-row">
                    <div class="layui-col-md12" style="text-align: center">
                        <img id="jsonImg" src=""/>
                    </div>
                    <div class="layui-col-md12" style="margin-left: 15px" id="reviewsDiv">
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block jquery %}
    <script>
        $(function () {
            getData();
        });

        function getData() {
            data = {
                'goods_id': $("#goods_id").val()
            }
            $.post('/goods/getOneGoods', data, function (result) {
                var jsonData = $.parseJSON(result);
                $("#jsonH3").text(jsonData.goods_name)
                $("#jsonImg").attr('src', jsonData.thumb_url)
                $("#jsonGoodsId").text(jsonData.goods_id)
                $("#jsonGoodsSales").text(jsonData.sales)
                $("#goodsDesc").text(jsonData.goods_desc)
                $("#jsonMinGroupPrice").text(jsonData.min_on_sale_group_price)
                $("#jsonMaxGroupPrice").text(jsonData.max_on_sale_group_price)
                $("#jsonMinNomalPrice").text(jsonData.min_on_sale_normal_price)
                $("#jsonMaxNomalPrice").text(jsonData.max_on_sale_normal_price)
            });

            $.post('/goods/getOneGoodsReviews', data, function (data) {
                var reviews = $.parseJSON(data);
                var str = "";
                $(reviews).each(function (index, ele) {
                    var comment = '';
                    var name = '';
                    if (ele.comment.length > 10) {
                        comment = (ele.comment).substring(0, 12) + '...';
                    } else {
                        comment = ele.comment;
                    }
                    if (ele.name.length > 5) {
                        name = (ele.name).substring(0, 3) + '..';
                    } else {
                        name = ele.name;
                    }
                    var time = new Date();
                    time.setTime(ele.time * 1000);
                    str += "<div class=\"layui-row\">\n" +
                        "                            <div class=\"layui-col-md2\"><label>" + name + "</label></div>\n" +
                        "                            <div class=\"layui-col-md6\"><span>" + comment + "</span></div>\n" +
                        "                            <div class=\"layui-col-md4\">" + time.toLocaleDateString() + "</div>\n" +
                        "                        </div>";
                });
                $("#reviewsDiv").html(str);

            });
        }
    </script>
{% endblock %}